<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>&lrm;</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/vue-infinite-scroll.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard syntax */
    list-style: none;
  }
  
  .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0 16px;
  }
  .top img {
    width: 100px;
    height: 100px;
  }
  .status {
    font-weight: bold;
    font-size: 14px;
    margin: 30px 0 15px;
    color: #fff;
  }
  .tips {
    width: 50%;
    color: #A9ABCA;
    font-size: 12px;
    text-align: center;
  }
  .guild-box {
    margin-top: 10px;
  }
  .btn {
    width: 100%;
  }
  </style>
</head>

<body>
  <div id="app">
    <div class="top">
      <img src="/mobile/img/create_wait.png" alt="">
      <div class="status">等待审核中</div>
      <div class="tips">审核结果可在系统消息中查看，请耐心等待审核。</div>
    </div>
    <div class="guild-box">
      <van-field readonly v-model="name" label="公会名称" label-width="60px"></van-field>
      <van-field readonly v-model="briefing" label="公会简介" label-width="60px" type="textarea" rows="1" autosize></van-field>
      <van-field name="uploader" label="公会图标" label-width="60px">
        <template #label>
          <div style="margin-bottom: 10px;">公会图标</div>
          <van-image width="180" height="180" :src="badge +'?x-oss-process=image/resize,h_160,m_fill/format,jpg'" />
        </template>
      </van-field>
    </div>
    <div style="margin: 16px;">
      <van-button class="btn" color="linear-gradient(270deg, #9358F4 0%, #6E53F3 100%)" round @click="revokeApply" :loading="loading" loading-text="撤销中...">{{btnText}}</van-button>
    </div>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      id: null,
      loading: false,
      state: null,
      token: '',
      name: '',
      briefing: '',
      badge: '',
      identity: null,
      key: {
        1: '加入公会',
        3: '创建公会',
        6: '退出公会'
      },
      btnText: ''
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      var data = parse(location.search)
      if (data.state && data.token) {
        this.state = data.state
        document.title = this.key[data.state] + '审核'
        this.btnText = '撤销' + this.key[data.state]
        this.token = data.token
        this.getData()
      }
    },
    methods: {
      getData() {
        request.get('/api/business/app/family/getMyFamily').then(res => {
          console.log(res)
          this.id = res.data.id
          this.name = res.data.name
          this.briefing = res.data.briefing
          this.badge = res.data.badge
          this.identity = res.data.identity
        })
      },
      revokeApply () {
        var msgMap = {
          1: '请确认是否要撤销加入公会',
          3: '请确认是否要撤销创建公会',
          6: '请确认是否要撤销退出公会'
        }
        var pathMap = {
          1: '/api/business/app/family/revocationApply',
          3: '/api/business/app/family/revocationFamilyApply',
          6: '/api/business/app/family/revocationQuitFamily'
        }
        this.$dialog.alert({
          message: msgMap[this.state],
          showCancelButton: true
        }).then(() => {
          request.get(pathMap[this.state]).then(res => {
            this.loading = false
            console.log(res)
            var that = this
            this.$toast({
              message: '已撤销申请',
              duration: 1500,
              onClose() {
                if (that.state == 1 || that.state == 3) {
                  location.replace(`./index.html?token=${that.token}`)
                } else {
                  location.replace(`./my.html?id=${that.id}&token=${that.token}`)
                }
              }
            })
          }).finally(() => {
            this.loading = false
          })
        }).catch(() => {
          // 点击取消
        })
      }
    }
  })
  </script>
</body>

</html>